<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
    <title>企业广告管理管理</title>
    <meta name="decorator" content="default"/>
    <%@include file="/WEB-INF/views/include/treeview.jsp" %>
    <script src="http://webapi.amap.com/maps?v=1.3&key=589381d73924ac781b542765046f3235&callback=init"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //$("#name").focus();
            $("#inputForm").validate({
                submitHandler: function (form) {
                    var ids = [], nodes = tree.getCheckedNodes(true);
                    for (var i = 0; i < nodes.length; i++) {
                        ids.push(nodes[i].id);
                    }
                    $("#category").val(ids);
                    loading('正在提交，请稍等...');
                    form.submit();
                },
                errorContainer: "#messageBox",
                errorPlacement: function (error, element) {
                    $("#messageBox").text("输入有误，请先更正。");
                    if (element.is(":checkbox") || element.is(":radio") || element.parent().is(".input-append")) {
                        error.appendTo(element.parent().parent());
                    } else {
                        error.insertAfter(element);
                    }
                }
            });
            var setting = {
                check: {enable: true, nocheckInherit: true}, view: {selectedMulti: false},
                data: {simpleData: {enable: true}}, callback: {
                    beforeClick: function (id, node) {
                        tree.checkNode(node, !node.checked, true, true);
                        return false;
                    }
                }
            };


            // 用户-菜单
            var zNodes = [
                    <c:forEach items="${categorys}" var="category">{
                    id: "${category.id}",
                    pId: "${not empty category.parent.id?category.parent.id:0}",
                    name: "${not empty category.parent.id?category.name:'名称'}"
                },
                </c:forEach>];
            // 初始化树结构
            var tree = $.fn.zTree.init($("#categoryTree"), setting, zNodes);
            // 不选择父节点
            tree.setting.check.chkboxType = {"Y": "ps", "N": "s"};
            // 默认选择节点
            var ids = "${hkEnterpriseAdv.category}".split(",");
            for (var i = 0; i < ids.length; i++) {
                var node = tree.getNodeByParam("id", ids[i]);
                try {
                    tree.checkNode(node, true, false);
                } catch (e) {
                }
            }
            // 默认展开全部节点
            tree.expandAll(true);
        });

        function Play(obj) {
            vid = $("#imgSrc").val();
            window.open("${ctx}/adv/hkMediaAdv/mediaPlayPath?videoId=" + vid);
            <%--location.href = "${ctx}/adv/hkMediaAdv/mediaPlayPath?videoId=" + vid;--%>
            <%--$(this).attr("href","${ctx}/adv/hkMediaAdv/mediaPlayPath?videoId=" + vid);--%>
            <%--alert($(this).attr("href","${ctx}/adv/hkMediaAdv/mediaPlayPath?videoId=" + vid));--%>
        }
        function PlayOffic(obj) {
            vid = $("#officiaVideo").val();
            window.open("${ctx}/adv/hkMediaAdv/mediaPlayPath?videoId=" + vid);
            <%--location.href = "${ctx}/adv/hkMediaAdv/mediaPlayPath?videoId=" + vid;--%>
            <%--$(this).attr("href","${ctx}/adv/hkMediaAdv/mediaPlayPath?videoId=" + vid);--%>
            <%--alert($(this).attr("href","${ctx}/adv/hkMediaAdv/mediaPlayPath?videoId=" + vid));--%>
        }
        function addRow(list, idx, tpl, row){
            $(list).append(Mustache.render(tpl, {
                idx: idx, delBtn: true, row: row
            }));
            $(list+idx).find("select").each(function(){
                $(this).val($(this).attr("data-value"));
            });
            $(list+idx).find("input[type='checkbox'], input[type='radio']").each(function(){
                var ss = $(this).attr("data-value").split(',');
                for (var i=0; i<ss.length; i++){
                    if($(this).val() == ss[i]){
                        $(this).attr("checked","checked");
                    }
                }
            });
        }
        function delRow(obj, prefix){
            var id = $(prefix+"_id");
            var delFlag = $(prefix+"_delFlag");
            if (id.val() == ""){
                $(obj).parent().parent().remove();
            }else if(delFlag.val() == "0"){
                delFlag.val("1");
                $(obj).html("&divide;").attr("title", "撤销删除");
                $(obj).parent().parent().addClass("error");
            }else if(delFlag.val() == "1"){
                delFlag.val("0");
                $(obj).html("&times;").attr("title", "删除");
                $(obj).parent().parent().removeClass("error");
            }
        }
    </script>
</head>
<body>
<ul class="nav nav-tabs">
    <li><a href="${ctx}/adv/hkEnterpriseAdv/">企业广告管理列表</a></li>
    <li class="active"><a href="${ctx}/adv/hkEnterpriseAdv/form?id=${hkEnterpriseAdv.id}">企业广告管理<shiro:hasPermission
            name="adv:hkEnterpriseAdv:edit">${not empty hkEnterpriseAdv.id?'修改':'添加'}</shiro:hasPermission><shiro:lacksPermission
            name="adv:hkEnterpriseAdv:edit">查看</shiro:lacksPermission></a></li>
</ul>
<br/>
<form:form id="inputForm" modelAttribute="hkEnterpriseAdv" action="${ctx}/adv/hkEnterpriseAdv/save" method="post"
           class="form-horizontal">
    <form:hidden path="id"/>
    <sys:message content="${message}"/>
    <div class="control-group">
        <label class="control-label">标题：</label>
        <div class="controls">
            <form:input path="title" htmlEscape="false" maxlength="200" class="input-xlarge required"/>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">用户：</label>
        <div class="controls"
        <sys:tableSelect id="user" name="user.id" value="${hkEnterpriseAdv.user.id}" labelName="user.name" labelValue="${hkEnterpriseAdv.user.name}" title="选择用户" url="${ctx}/sys/user/hkUser/list?1=1" checked="1" />
    </div>
    <div class="control-group">
        <label class="control-label">视频：</label>
        <div class="controls">
            <form:input id="imgSrc" path="imgSrc" htmlEscape="false" maxlength="200" class="input-xlarge"  />
            <a href="javascript:" onclick="Play()" class="btn">播放</a>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">视频：</label>
        <div class="controls">
            <form:hidden id="aimgSrc" path="aimgSrc" htmlEscape="false" maxlength="200" class="input-xlarge required"/>
            <sys:ckfinder input="aimgSrc" type="files" uploadPath="/hkEnterpriseAdv" selectMultiple="false"/>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">官方视频标题：</label>
        <div class="controls">
            <form:input path="officiaTitle" htmlEscape="false" maxlength="200" class="input-xlarge"/>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">官方视频：</label>
        <div class="controls">
            <form:input id="officiaVideo" path="officiaVideo" htmlEscape="false" maxlength="200" class="input-xlarge"  />
            <a href="javascript:" onclick="PlayOffic()" class="btn">播放</a>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">官方视频：</label>
        <div class="controls">
            <form:hidden id="aofficiaVideo" path="aofficiaVideo" htmlEscape="false" maxlength="200"
                         class="input-xlarge"/>
            <sys:ckfinder input="aofficiaVideo" type="files" uploadPath="/hkEnterpriseAdv" selectMultiple="false"/>
        </div>
    </div>
   <%-- <div class="control-group">
        <label class="control-label">链接：</label>
        <div class="controls">
            <form:input path="link" htmlEscape="false" maxlength="200" class="input-xlarge"/>
        </div>
    </div>--%>
    <div class="control-group">
        <label class="control-label">说明：</label>
        <div class="controls">
            <form:textarea id="note" path="note" htmlEscape="true" class="input-xxlarge required"/>
            <sys:ckeditor replace="note" uploadPath="/hkEnterpriseAdv"/>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">序号：</label>
        <div class="controls">
            <form:input path="imgRank" htmlEscape="false" maxlength="200" class="input-xlarge  digits required"/>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">所属分类：</label>
        <div class="controls">
            <div id="categoryTree" class="ztree" style="margin-top:3px;float:left;"></div>
            <form:hidden path="category"/>

        </div>
    </div>
    <div class="control-group">
        <label class="control-label">系统币种：</label>
        <div class="controls">
            <form:select path="currencyType" class="input-xlarge ">
                <form:option value="" label=""/>
                <form:options items="${fns:getDictList('hk_currency_type')}" itemLabel="label" itemValue="value"
                              htmlEscape="false"/>
            </form:select>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">乐币：</label>
        <div class="controls">
            <form:input path="integral" htmlEscape="false" maxlength="11" class="input-xlarge digits required"/>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">总乐币：</label>
        <div class="controls">
            <form:input path="integralCount" htmlEscape="false" maxlength="11" class="input-xlarge digits required"/>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">状态：</label>
        <div class="controls">
            <form:select path="state" class="input-xlarge ">
                <form:option value="" label=""/>
                <form:options items="${fns:getDictList('yes_no')}" itemLabel="label" itemValue="value"
                              htmlEscape="false"/>
            </form:select>
        </div>
    </div>

    <div class="control-group">
        <label class="control-label">视频长度：</label>
        <div class="controls">
            <form:input path="vedioLength" htmlEscape="false" maxlength="11" class="input-xlarge required"/>
        </div>
    </div>
   <%-- <div class="control-group">
        <label class="control-label">物品：</label>
        <div class="controls">
            <form:input path="goodsIds" htmlEscape="false" maxlength="200" class="input-xlarge required"/>
        </div>
    </div>--%>
    <div class="control-group">
        <label class="control-label">标签：</label>
        <div class="controls">
            <form:checkboxes path="tags" items="${fns:getDictList('hk_enterprise_adv_tag')}" itemLabel="label"
                             itemValue="value" htmlEscape="false" class=""/>
        </div>
    </div>
   <%-- <div class="control-group">
        <label class="control-label">管理分类：</label>
        <div class="controls">
            <form:select path="manageCategory" class="input-xlarge ">
                <form:option value="" label=""/>
                <form:options items="${fns:getDictList('hk_category')}" itemLabel="label" itemValue="value"
                              htmlEscape="false"/>
            </form:select>
        </div>
    </div>--%>
    <div class="control-group">
        <label class="control-label">国家：</label>
        <div class="controls">
            <form:hidden path="countryId"/>
            <form:input path="country" htmlEscape="false" maxlength="32" class="input-xlarge required"/>

        </div>
    </div>
    <div class="control-group">
        <label class="control-label">省：</label>
        <div class="controls">
            <form:hidden path="provinceId"/>
            <form:input path="province" htmlEscape="false" maxlength="32" class="input-xlarge required"/>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">市：</label>
        <div class="controls">
            <form:hidden path="cityId"/>
            <form:input path="city" htmlEscape="false" maxlength="32" class="input-xlarge required"/>
        </div>
    </div>
    <form:hidden path="enterpriseId"/>

    <div class="control-group">
        <label class="control-label">企业名称：</label>
        <div class="controls">
            <form:input path="enterpriseName" htmlEscape="false" maxlength="100" class="input-xlarge required"/>
        </div>
    </div>
    <%--<div class="control-group">
        <label class="control-label">是否评论：</label>
        <div class="controls">
            <form:select path="comment" class="input-xlarge ">
                <form:option value="" label=""/>
                <form:options items="${fns:getDictList('yes_no')}" itemLabel="label" itemValue="value"
                              htmlEscape="false"/>
            </form:select>
        </div>
    </div>--%>
    <div class="control-group">
        <label class="control-label">开始时间：</label>
        <div class="controls">
            <input name="beginDate" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate "
                   value="<fmt:formatDate value="${hkEnterpriseAdv.beginDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"
                   onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false});"/>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">结束时间：</label>
        <div class="controls">
            <input name="endDate" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate "
                   value="<fmt:formatDate value="${hkEnterpriseAdv.endDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"
                   onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false});"/>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">左键点击选择地点：</label>
        <div class="controls" id="container" style="width: 600px;height:400px;">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">经度：</label>
        <div class="controls">
            <form:input path="longitude" htmlEscape="false" maxlength="100" class="input-xlarge "/>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">纬度：</label>
        <div class="controls">
            <form:input path="latitude" htmlEscape="false" maxlength="100" class="input-xlarge "/>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">封面图片：</label>
        <div class="controls">
            <form:hidden id="coverImgSrc" path="coverImgSrc" htmlEscape="false" maxlength="200"
                         class="input-xlarge required"/>
            <sys:ckfinder input="coverImgSrc" type="images" uploadPath="/hkEnterpriseAdv" selectMultiple="false"/>

        </div>
    </div>
    <div class="control-group">
        <label class="control-label">官方视频封面图片：</label>
        <div class="controls">
            <form:hidden id="officiaImgSrc" path="officiaImgSrc" htmlEscape="false" maxlength="200"
                         class="input-xlarge"/>
            <sys:ckfinder input="officiaImgSrc" type="images" uploadPath="/hkEnterpriseAdv" selectMultiple="false"/>

        </div>
    </div>
    <%--<div class="control-group">
        <label class="control-label">封面图片链接：</label>
        <div class="controls">
            <form:input path="coverLink" htmlEscape="false" maxlength="200" class="input-xlarge"/>
        </div>
    </div>--%>
    <div class="control-group">
        <label class="control-label">备注：</label>
        <div class="controls">
            <form:textarea path="remarks" htmlEscape="false" rows="4" maxlength="100" class="input-xxlarge required"/>
        </div>
    </div>

<div class="control-group">
    <label class="control-label">企业广告图集：</label>
    <div class="controls">
        <table id="contentTable" class="table table-striped table-bordered table-condensed">
            <thead>
            <tr>
                <th class="hide"></th>
                <th>图片</th>
                <th>标题</th>
                <th>序号</th>
                <shiro:hasPermission name="adv:hkEnterpriseAdv:edit"><th width="10">&nbsp;</th></shiro:hasPermission>
            </tr>
            </thead>
            <tbody id="hkEnterpriseProductList">
            </tbody>
            <shiro:hasPermission name="adv:hkEnterpriseAdv:edit"><tfoot>
            <tr><td colspan="6"><a href="javascript:" onclick="addRow('#hkEnterpriseProductList', hkEnterpriseProductRowIdx, hkEnterpriseProductTpl);hkEnterpriseProductRowIdx = hkEnterpriseProductRowIdx + 1;" class="btn">新增</a></td></tr>
            </tfoot></shiro:hasPermission>
        </table>
        <script type="text/template" id="hkEnterpriseProductTpl">//<!--
						<tr id="hkEnterpriseProductList{{idx}}">
							<td class="hide">
								<input id="hkEnterpriseProductList{{idx}}_id" name="hkEnterpriseProductList[{{idx}}].id" type="hidden" value="{{row.id}}"/>
								<input id="hkEnterpriseProductList{{idx}}_delFlag" name="hkEnterpriseProductList[{{idx}}].delFlag" type="hidden" value="0"/>
								<input id="hkEnterpriseProductList{{idx}}_product.id" name="hkEnterpriseProductList[{{idx}}].product.id" type="hidden" value="{{row.product.id}}"/>
							</td>
							<td>
							    <input id="hkEnterpriseProductList{{idx}}imgUrl" name="hkEnterpriseProductList[{{idx}}].imgUrl" type="hidden" value="{{row.imgUrl}}" maxlength="100"/>
								<sys:ckfinder input="hkEnterpriseProductList{{idx}}imgUrl" type="images" uploadPath="/hkEnterpriseAdv" selectMultiple="false" maxWidth="60" maxHeight="60 "/>
							</td>
							<td>
								<input id="hkEnterpriseProductList{{idx}}_title" name="hkEnterpriseProductList[{{idx}}].title" type="text" value="{{row.title}}" maxlength="200" class="input-small "/>
							</td>
							<td>
								<input id="hkEnterpriseProductList{{idx}}_sort" name="hkEnterpriseProductList[{{idx}}].sort" type="text" value="{{row.sort}}" maxlength="11" class="input-small  digits"/>
							</td>
							<shiro:hasPermission name="adv:hkEnterpriseAdv:edit"><td class="text-center" width="10">
								{{#delBtn}}<span class="close" onclick="delRow(this, '#hkEnterpriseProductList{{idx}}')" title="删除">&times;</span>{{/delBtn}}
							</td></shiro:hasPermission>
						</tr>//-->
        </script>
        <script type="text/javascript">
            var hkEnterpriseProductRowIdx = 0, hkEnterpriseProductTpl = $("#hkEnterpriseProductTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
            $(document).ready(function() {
                var data = ${fns:toJson(hkEnterpriseAdv.hkEnterpriseProductList)};
                for (var i=0; i<data.length; i++){
                    addRow('#hkEnterpriseProductList', hkEnterpriseProductRowIdx, hkEnterpriseProductTpl, data[i]);
                    hkEnterpriseProductRowIdx = hkEnterpriseProductRowIdx + 1;
                }
            });
        </script>
    </div>
</div>
    <div class="form-actions">
        <shiro:hasPermission name="adv:hkEnterpriseAdv:edit"><input id="btnSubmit" class="btn btn-primary" type="submit"
                                                                    value="保 存"/>&nbsp;</shiro:hasPermission>
        <input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
    </div>
</form:form>
<script>
    var longitude = 116.455241;
    var latitude = 39.906005;
    var marker;
    var areas = [];
    <c:forEach items="${areas}" var="item">
    var area = {id: "${item.id}", name: "${item.name}", type: "${item.type}"};
    areas.push(area);
    </c:forEach>
    <c:if test="${not empty hkEnterpriseAdv.longitude}">
    longitude =${hkEnterpriseAdv.longitude};
    latitude =${hkEnterpriseAdv.latitude};
    </c:if>

    function init() {
        var map = new AMap.Map('container', {
            center: [longitude, latitude],
            zoom: 20
        });
        marker = new AMap.Marker({
            map: map,
            draggable: false,  //是否可拖动
            position: [longitude, latitude]
        });
        //marker.setAnimation('AMAP_ANIMATION_BOUNCE');
        map.plugin(["AMap.ToolBar"], function () {
            map.addControl(new AMap.ToolBar());
        });
        //为地图注册click事件获取鼠标点击出的经纬度坐标
        var clickEventListener = map.on('click', function (e) {
            $("#longitude").val(e.lnglat.getLng());
            $("#latitude").val(e.lnglat.getLat());

                map.remove(marker);
                marker = new AMap.Marker({
                    map:map,
                    draggable: false,  //是否可拖动
                    position:[e.lnglat.getLng(),e.lnglat.getLat()]
                });
                map.getCity(function(data) {
                    if (data['province'] && typeof data['province'] === 'string') {
                        console.log(data)

                        for(var p in areas){
                            if(data['province'].indexOf(areas[p].name)>-1){
                                document.getElementById('provinceId').value = areas[p].id;
                                document.getElementById('province').value = areas[p].name;
                            }
                            if(data['city']==""&&areas[p].type=="3"){
                                if(data['province'].indexOf(areas[p].name)>-1){
                                    document.getElementById('cityId').value =areas[p].id;
                                    document.getElementById('city').value =areas[p].name;
                                }
                            }
                            else{
                                if(data['city'].indexOf(areas[p].name)>-1){
                                    document.getElementById('cityId').value =areas[p].id;
                                    document.getElementById('city').value =areas[p].name;
                                }
                            }
                            document.getElementById('countryId').value ="1";
                            document.getElementById('country').value ="中国";
                        }


                    }
                })
            });
        }
	</script>
</body>
</html>